import React, { Component } from "react";

class TodoFooter extends Component {
  render() {
    //定义全部数据个数    是数据todoList的数组长度
    const arrLength = this.props.todoList.length;
    //1
    //定义已选中的数量
  /*   let checkedNum = 0;
    this.props.todoList.forEach(v => {
      if (v.isChecked) checkedNum++;
    }) */

    //2
    // const checkedNum = this.props.todoList.filter(v => v.isChecked).length;

    //3
    const checkedNum = this.props.todoList.reduce((prevNum, item) => {
      if (item.isChecked) prevNum++;
      return prevNum;
    },0)

    //全选按钮
    //已选中的数量和数据总长度一致,就代表全选,赋值给isAllChecked
    let isAllChecked = checkedNum === arrLength;
    //判断  刨除 都相等且都为0时候的情况,不能是被选中状态
    if (checkedNum === 0 && arrLength === 0) isAllChecked = false;

    return (
      <div className="todo-footer">
        <label>
          <input
            type="checkbox"
            /* 全选时候的状态赋给这个checkbox 的 checked 属性 */
            checked={isAllChecked}
            //绑定onChange 事件  调用改变函数 对状态数据取反
            onChange={()=>this.props.changeCheckedAll(!isAllChecked)}
          />
        </label>
        <span>
          <span>已选{checkedNum}</span> / 全部{arrLength}
        </span>
        <button
          style={{display:checkedNum>0?'block':'none'}}
          className="btn btn-danger"
          // 绑定点击事件   调用删除函数
          onClick={this.props.delAllChecked}
        >清除已选择任务</button>
      </div>
    );
  }
}

export default TodoFooter;
